<!--
  表格列
  @author 邵鹏坤 2022年9月22日
  1 功能解析：

  2 数据源：
-->
<template>
  <th class="--win-table-header">
    <!-- 'flex-left':!props.direction||props.direction==='left',
    'flex-center': props.direction&&props.direction==='center',
    'flex-right': props.direction&&props.direction==='right', -->
    <!-- :class="{
    'table-header-border': index!==0&&props.border,
  }" -->
    <td v-for="(item, index ) in _columns"
    :key="item.field"
    :class="[
      unTd.e(),
      unTd.p(_direction),
      unTd.is('first',_index && _index != -1 ? index == 0 : index == 1),
      unTd.is('border',_border),
      ]
    "
    ref="td"
    @mouseenter="_resizable&&mouseenter(index)"
    @mouseout="_resizable&&mouseout(index)"
    :style="{
      width: item.width&&item.width>0?item.width+'px':'',
      'flex-grow' : !item.width?1:'unset'
    }"
    v-show="item.field === 'index' ? (_index&&_index !== -1) : true"
    >
      {{item.listed}}
    </td>
  </th>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import useNamespace from '@/hooks/use-namespace'
  import useProp from '@/hooks/use-prop'
// defineProps<{
//   // 内容对其方式
//   direction?: string
//   // 表头边框
//   border?: boolean
//   // 序号
//   index: boolean
//   columns: Array<{
//     // 用于绑定data里的数据字段名
//     field: string
//     // 用于渲染在列头上的列明
//     listed: string
//     // 列宽度
//     width?: number
//   }>
// }>()
const unTd = useNamespace('table-header-td')
const _direction = useProp('direction')
// const _border = useProp('border')
const _columns = useProp('columns')
const _resizable = useProp('resizable')
const _index = useProp('index')
const _border = useProp('border')
const td= ref(null)
const emit = defineEmits(['changeWidth'])
let currentCloumnIndex = -1
const mouseenter = (index:number)=>{
  if (navigator.userAgent.indexOf('Firefox') >= 0) {
    // 火狐写法 添加滚轮滚动监听事件
    window.addEventListener('DOMMouseScroll', mouseScroll, {
    passive: false,
})
  } else {
    // 非火狐 添加滚轮滚动监听事件
    window.addEventListener('mousewheel', mouseScroll, {
    passive: false,
})

  }
  currentCloumnIndex = index
}
const mouseout = (index:number)=>{
  if (navigator.userAgent.indexOf('Firefox') >= 0) {
    // 火狐写法 添加滚轮滚动监听事件
    window.removeEventListener('DOMMouseScroll', mouseScroll)
  } else {
    // 非火狐 添加滚轮滚动监听事件
    window.removeEventListener('mousewheel', mouseScroll)
  }
}
const mouseScroll = (e:any)=>{
  e.preventDefault()
  emit('changeWidth',currentCloumnIndex,e.deltaY>0)
}
</script>

<style lang="scss" scoped>
.--win-table-header {
  width: 100%;
  display: flex;
  align-items: center;
  border: none;
  color: $table-header-color;

  font-size: 18px;
  .--win-table-header-td {
    padding: 10px 4px;
    box-sizing: border-box;
    border: $table-border-color solid;
    border-width: 0 0 $table-border-width 0;
    justify-content: left;
    display: flex;
  }
  .first.border{
    border: $table-border-color solid;
    border-width: $table-border-width;
  }
  .--win-table-header-td--center{
    justify-content: center !important;
  }
  .--win-table-header-td--left{
    justify-content: left  !important;
  }
  .--win-table-header-td--right{
    justify-content: right  !important;
  }
  .border{
    border: $table-border-color solid;
    border-width: $table-border-width $table-border-width $table-border-width 0;
  }
}
</style>
